<template>
	<view id="top">
			<image src="../../static/images/RankImg/touxiang.jpg" id='image'
		></image>
			<view class="infor">
			<text>{{user.name}}</text>
			<text>当前总排名：{{user.sequence}}</text>
			<text>距离上一名还差：{{user.diff}}名</text>
			</view>
		<view class="total"><text>总榜第{{user.sequence}}</text></view>
		<view class="time">
			<icon id="icon" class="iconfont .icon-kaoqindaka-xian" style="color:#ffffff;"></icon>
			<text>累积打卡时长：{{user.clockTime}}小时</text>
			<button @click="goClockRec">打卡记录</button>
		</view>
	</view>
	<view class="rank">
		<text>总排行</text>
	</view>
	<view class="user"  v-for="(v,i) in userInfor.list" :key="i" >
		<view class="num"><text>{{v.sequence}}</text></view>
		<image src="../../static/images/RankImg/touxiang.jpg" 
		></image>
		<view class="u_infor">
			<text>{{v.name}}</text>
			<text>打卡时长：{{v.clockTime}}小时次数：{{v.clockNum}}</text>
		</view>
	</view>
</template>

<script setup>
	import {onMounted,ref,reactive} from 'vue'
	import http from '../../utils/http.js'
	const userInfor=reactive(
	{
		list:[{sequence:'',
			name:'',
			clockTime:'',
			clockNum:''}]
	});
	const user=reactive({
		name:'',
		sequence:'',
		diff:'',
		clockTime:''
	});
	const getId=()=>{
		uni.getStorage({
			key:'userId',
			success(res){
				console.log(res);
			  getUser(res.data)
			}
		})
	}
	const  getRankList=()=>{
				http({
					url:'/clock/rank',
					params:'get',
				}).then((res)=>{
				  
				  let arr1 = res.data
				 function sortBy(props) {
				     return function(a,b) {
				         return a[props] - b[props];
				     }
				 }
				 arr1.sort(sortBy("sequence"));
				 userInfor.list=arr1
				 
				})};

	const  getUser=(id)=>{
		http({
			url:'/clock/userRank',
			params:'get',
			data:{
				userId:id?id:''
			}
		}).then((res)=>{
			user.name=res.data.name
			user.sequence=res.data.sequence
			user.diff=res.data.diff
			user.clockTime=res.data.clockTime
		})
	}
	let kn=onMounted(()=>{
		getRankList()
		// getUser()
		getId()
	})
	const goClockRec=()=>{
		wx.navigateTo({
		 url:"../ClockRecords/ClockRecords"
		})
	}
</script>

<style  scoped>
	@import url('../../static/fonts/iconfont.css');
	#top{
		width: 100%;
		height: 280rpx;
		display: flex;
		background-color: #f7efe5;
		position: relative;
	}
	#image{
		width: 120rpx;
		height: 120rpx;
		margin: 30rpx;
	}
	.infor{
		height: 120rpx;
		width: 300rpx;
		display: flex;
		flex-direction: column;
		margin-right: 80rpx;
	}
	.infor text:nth-child(1){
			font-weight: 700;
			font-size: 30rpx;
			margin-top: 30rpx;
	}
	.infor text:nth-child(2){
		font-size: 24rpx;
		color: #7F7F7F;
		line-height: 44rpx;
	}
	.infor text:nth-child(3){
		font-size: 24rpx;
		color: #7F7F7F;
		line-height: 44rpx;
	}
	.total{
		width: 100rpx;
		height: 100rpx;
		background-color: #c6964f;
		border-radius: 50rpx;
		margin-right: 30rpx;
		margin-top:40rpx;
		text-align: center;
		
	}
	.total text{
		display: inline-block;
		margin-top: 22rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}
	.time{
		display: flex;
		/* justify-content: center; */
		background-color: #c6964f;
		width: 660rpx;
		height: 76rpx;
		position: absolute;
		left: 48rpx;
		bottom: 0;
		border-radius:20rpx 20rpx 0 0;
	}
	#icon{
		margin-left: 30rpx;
		margin-right: 18rpx;
	}
	.time text{
		color:#FFFFFF ;
		margin-top: 22rpx;
		font-size: 30rpx;
		text-align: left;
	}
	.time button{
		width: 180rpx;
		height: 52rpx;
		font-size: 24rpx;
		color: #c6964f;
		margin-top: 18rpx;
/* 		text-align: center; */
		/* line-height: 50rpx; */
		justify-content: center;
		line-height: 48rpx;
	}
	.rank{
		height: 100rpx;
		display: flex;
		justify-content: center;
	}
	.rank text{
		/* width: 200rpx; */
		font-size: 36rpx;
		color: #333333;
		/* margin-left: 130rpx; */
	}
	.rank text:nth-child(1){
		color:  #C6964F;
		text-decoration: underline;
	}
	.user{
		width: 750rpx;
		display:flex;
		margin-bottom: 30rpx;
		margin-left: 20rpx;
	}
	.num{
		width: 60rpx;
		height: 60rpx;
		background-color: #c6964f;
		border-radius: 50rpx;
		margin-left: 50rpx;
	}
	.num text{
		text-align: center;
		color: #FFFFFF;
		font-size: 26rpx;
		margin-left: 22rpx;
	}
	.user image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		margin-top: -20rpx;
		margin-left: 30rpx;

	}
	.u_infor{
		height: 80rpx;
		width: 400rpx;
		display: flex;
		flex-direction: column;
		margin-left: 40rpx;
	}
	.u_infor text:nth-child(1){
		font-size: 28rpx;
		font-weight: 700;
	}
	.u_infor text:nth-child(2){
		font-size: 20rpx;
		font-weight: 700;
		color: #7F7F7F;
		margin-top: 8rpx;
		
	}
	
</style>
